<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div1 {
				width: 300px;
				height: 300px;
				position: relative;
				margin: 50px auto;
			}
			
			#div1 div {
				width: 300px;
				height: 300px;
				border: 1px #000 solid;
				display: none;
				background: #adaeae;
				text-align: center;
				line-height: 300px;
				font-size: 48px;
			}
			
			input {
				outline: none;
				width: calc(100%/4);
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
			
			.active {
				background: red;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<input class="active" type="button" value="1">
			<input type="button" value="2">
			<input type="button" value="3">
			<div style="display:block">11111</div>
			<div>22222</div>
			<div>33333</div>
		</div>
		<script>
			window.onload = function() {
				function tab(idname) {
					this.Div = document.getElementById(idname);
					this.input = this.Div.getElementsByTagName("input");
					this.div = this.Div.getElementsByTagName("div");
					this.iNow = 0;
				}
				
				
				tab.prototype.init = function() {
					var _this = this;
					for(var i = 0; i < this.input.length; i++) {
						this.input[i].index = i;
						this.input[i].onclick = function() {
							_this.change(this);
						}
					}
				}

				tab.prototype.change = function(objname) {
					for(var i = 0; i < this.input.length; i++) {
						this.input[i].className = "";
						this.div[i].style.display = "none";
						this.div[i].style.background = "white";
					}
					objname.className = "active";
					this.div[objname.index].style.display = "block";
					this.div[objname.index].style.background = "#adaeae";

				}
				var t1 = new tab("div1");
				t1.init();
			}
		</script>
	</body>

</html>